<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>亚牛逊图书——热门</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<br/>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h1 class="text-center">
                <a href="/index" style="text-decoration-line: none;color: black">📕亚牛逊图书</a>
            </h1>
            <ul class="nav nav-pills">
                <li><a href="/index">首页</a></li>
                <li><a href="/book/bookList/0/0">书单</a></li>
                <li><a href="/recommend/rank">排行</a></li>
                <li class="active"><a href="/recommend/hot">热门</a></li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">我的<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li th:if="not ${userInfo}"><a href="/user/login" th:text="欢迎，请先登录"></a></li>
                        <li th:if="${userInfo}"><a href="#" th:text=('欢迎，'+${userInfo})></a></li>
                        <li th:if="${userInfo}" class="divider"></li>
                        <li th:if="${userInfo}"><a href="/user/profile" th:text="个人中心"></a></li>
                        <li th:if="${userInfo}"><a href="/user/collection" th:text="收藏"></a></li>
                        <li th:if="${userInfo}"><a href="/user/logoutAction" th:text="注销"></a></li>
                    </ul>
                </li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/register">注册</a></li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/login">登录</a></li>
            </ul>

            <center>
                <div class="page-header">
                    <h2>
                        书中自有颜如玉 <small>ヽ(✿ﾟ▽ﾟ)ノ</small>
                    </h2>
                </div>
                <br/>
                <h4>※热门图书※</h4>
                <br/>
                <div>
                    <button class="btn" type="button"><a href="/recommend/userRecs">帮我推荐！</a></button>
                </div>
                <br/><br/><br/>
            </center>

            <h4>历史热门</h4>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                </tr>
                </thead>
                <tbody th:each="hot:${hotList}">
                <tr class="success">
                    <td><a th:href="'/book/detail/'+${hot.bookId}" th:text="${hot.bookName}"></a></td>
                    <td th:text="${hot.price}"></td>
                    <td th:text="${hot.author}"></td>
                </tr>
                </tbody>
            </table>
            <br/><br/>
            <h4>当下热门</h4>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                </tr>
                </thead>
                <tbody th:each="recent:${hotRecent}">
                <tr class="success">
                    <td><a th:href="'/book/detail/'+${recent.bookId}" th:text="${recent.bookName}"></a></td>
                    <td th:text="${recent.price}"></td>
                    <td th:text="${recent.author}"></td>
                </tr>
                </tbody>
            </table>
            <br/>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>
<br/><br/>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</body>
</html>